<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>头部导航</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
        .nav {
            position: fixed;
            display: flex;
            top: 0;
            width: 100%;
            z-index: 999;
            background-color: #fff;
        }

        .nav_logo {
            flex: 0 0 50%;
            max-width: 50%;
            z-index: 9;
            background-color: #fff;
        }

        .nav_cnt {
            position: relative;
            flex: 0 0 50%;
            max-width: 50%;
            padding: 0 20px;
            z-index: 8;
        }

        .nav_logo img {
            width: 260px;
            height: 70px;
            object-fit: contain;
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .nav_logo_box {
            height: 100px;
            position: relative;
            width: 60%;
        }

        .nav_list {
            position: relative;
            display: flex;
            z-index: 8;
        }

        .nav_list>li {
            position: relative;
            padding: 0 10px;
            transition: 0.5s ease-out;
            right: 0;
        }

        .nav_list>li>a {
            text-align: center;
            display: block;
            font-size: var(--f_text);
            min-width: 95px;
            line-height: 98px;
            color: var(--c_text);
            white-space: nowrap;
        }

        .nav_list>li>a.select,
        .nav_list>li:hover>a {
            color: var(--c_theme);
            border-bottom: 2px solid var(--c_theme);
        }

        .nav_list>li>ul {
            margin: auto;
            position: absolute;
            top: 100px;
            display: none;
        }


        .nav_list>li>ul>li>a {
            display: block;
            background-color: #fff;
            transition: 0.5s;
            font-size: var(--f_text);
            color: var(--c_text);
        }

        .nav_list>li>ul>li>a:hover {
            background-color: var(--c_b_dark);
        }
        /*产品后面的小提示标*/
        .nav_down_small {
            width: 50px;
            height: 50px;
            text-align: center;
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            width: 50px;
            height: 50px;
            font-size: 16px;
            transition: 0.5s;
            overflow: hidden;
        }

        .nav_down_small span {
            cursor: pointer;
            display: block;
            color: var(--c_text);
            line-height: 50px;
            font-size: 30px;
            cursor: pointer;
        }
        .nav_goleft,
        .nav_goright {
            display: none;
            position: absolute;
            width: 14px;
            height: 30px;
            padding: 10px 4px;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: #999;
            cursor: pointer;
            transition: 0.5s;
            z-index: 9;
        }

        .nav_goleft:hover,
        .nav_goright:hover {
            background-color: rgba(153, 153, 153, 0.5);
        }

        .nav_gobox {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        .nav_goleft {
            left: 5px;
        }

        .nav_goright {
            right: 5px;
        }

        .nav_goleft i,
        .nav_goright i {
            top: 0;
            bottom: 0;
            position: absolute;
            display: block;
            transform: rotate(45deg);
            width: 6px;
            height: 6px;
            margin: auto;
            background-color: #666;
        }

        .nav_goleft i {
            left: 2px;
        }

        .nav_goright i {
            right: 2px;
        }

        /*汉堡包*/
        .hamburger {
            top: 10px;
            left: 15px;
            width: 40px;
            cursor: pointer;
            z-index: 10;
            display: none;
            position: fixed;
            margin: auto;
        }

        .hamburger i {
            display: block;
            width: 26px;
            height: 2px;
            background: #999;
            margin: 6px auto;
        }

        .hamburger i {
            position: relative;
            transform-origin: left;
            transition: 0.5s;
        }

        .hamburger.active i:nth-child(1){
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            top: 0;
            left: 0;
            opacity: 1;
        }

        .hamburger.active i:nth-child(2) {
            opacity: 0;
        }

        .hamburger.active i:nth-child(3) {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            top: 2px;
            left: 0;
            opacity: 1
        }

        /*点击汉堡包之后，会出现全局的遮罩层*/
        .nav_bg_ceng {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 7;
            display: none;
        }
        @media (min-width:769px) {

            .nav_list::after,
            .nav_list::before {
                position: absolute;
                display: block;
                background-color: #fff;
                content: '';
                width: 20px;
                height: 100px;
                z-index: 666;
            }

            .nav_list::after {
                left: -20px;
            }

            .nav_list::before {
                right: -20px;
            }

            .nav_list>li>ul {
                width: 120%;
                left: 50%;
                transform: translate(-50%);
                padding-top: 15px;
            }

            .nav_list>li:hover>ul {
                display: block;
            }
            .nav_list>li>ul>li {
                padding: 5px 0;
                text-align: center;
            }

            .nav_list>li>ul>li>a {
                padding: 10px 20px;
                box-shadow: 0 0 4px var(--c_frame);
            }
        }

        @media (min-width:769px) and (max-width:1400px) {}

        @media (max-width:991px) {
            .nav_logo img {
                left: 0;
                margin-left: 10px;
            }
        }

        @media (max-width:768px) {
            .nav {
                flex-wrap: wrap;
            }

            .nav_cnt {
                height: 100%;
                flex: 0 0 100%;
                max-width: 100%;
            }

            .nav_logo {
                flex: 0 0 100%;
                max-width: 100%;
            }

            .nav_logo_box {
                width: 100%;
                height: 50px;
            }

            .nav_logo img {
                width: 160px;
                height: 40px;
                margin: auto;
                right: 0;
            }

            .nav_list {
                display: none;
                border-top: 1px solid var(--c_frame);
            }

            .nav_list>li {
                padding: 0;
            }

            .nav_list>li>a {
                padding-left: 26px;
                text-align: left;
                height: 50px;
                line-height: 50px;
                border-bottom: 1px solid var(--c_frame);
            }

            .nav_list>li>a.select,
            .nav_list>li:hover>a {
                border-bottom: 1px solid var(--c_frame);
            }

            .nav_list>li>ul {
                position: initial;
                display: none;
            }

            .nav_list>li>ul>li {
                text-align: left;
                border-bottom: 1px solid var(--c_frame);
            }

            .nav_list>li>ul>li>a {
                line-height: 38px;
                padding-left: 60px;
            }
            .nav_down_small{
                display: block;
            }
            .hamburger {
                display: block;
            }
        }
    </style>
    <script src="../js/jquery-3.5.1.min.js"></script>
</head>

<body>
    <div class="nav">
        <div class="nav_logo">
            <div class="nav_logo_box">
                <a href=""><img src="../images/brand3.png.webp" alt=""></a>
            </div>
        </div>
        <div class="nav_cnt">
            <div class="nav_goleft">
                <div class="nav_gobox"><i></i></div>
            </div>
            <div class="nav_goright">
                <div class="nav_gobox"><i></i></div>
            </div>
            <ul class="nav_list">
                <li><a class="select" href="">首页</a></li>
                <li><a href="">关于我们</a></li>
                <li>
                    <a href="">服务案例</a>
                    <ul>
                        <li><a href="">案例展示</a></li>
                        <li><a href="">服务宗旨</a></li>
                    </ul>
                    <div class="nav_down_small">
                        <span>&gt;</span>
                    </div>
                </li>
                <li><a href="">新闻中心</a></li>
                <li>
                    <a href="">联系我们</a>
                    <ul>
                        <li><a href="">留言版</a></li>
                    </ul>
                    <div class="nav_down_small">
                        <span>&gt;</span>
                    </div>
                </li>
            </ul>
        </div>
        <!--汉堡包-->
        <div class="hamburger">
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
    <!-- 点击汉堡后显示遮罩层 -->
    <div class="nav_bg_ceng"></div>
</body>
<script>
    $(function () {
        // pc端导航缩小左右移动
        //ul内容li总宽度
        var nav_list_width = 0;
        // li左右内边距
        var nav_list_p = 10 + 10
        var nav_list_arr = $('.nav_list>li').map(function (i, n) {
            nav_list_width = nav_list_width + $(n).width() + nav_list_p
            return $(n).width() + nav_list_p
        })
        var nav_cnt_width = $('.nav_cnt').width()
        console.log($(window).width());
        if (nav_cnt_width <= nav_list_width && $(window).width() >= 769) {
            $('.nav_goright').css('display', 'block')
        }
        var nav_cnt_Maxdeviation = nav_cnt_width - nav_list_width //最大偏移量
        var nav_cnt_deviation = 0 //偏移值
        //  监听屏幕大小变化
        var nav_lt = 0; //当前位置
        var nav_cnt_deviation_exceed = 0 //超出的偏移值
        // 左按钮
        $('.nav_goleft').click(function () {
            if (nav_cnt_deviation == nav_cnt_Maxdeviation) {
                nav_cnt_deviation = nav_cnt_deviation - nav_cnt_deviation_exceed
                $('.nav_goright').css('display', 'block')
            } else {
                nav_cnt_deviation = nav_cnt_deviation + nav_list_arr[nav_lt - 1] //偏移值
                nav_lt = nav_lt - 1;
            }
            if (nav_lt == 0) {
                $('.nav_goleft').css('display', 'none')
            }
            $('.nav_list>li').css('transform', 'translate(' + String(nav_cnt_deviation) + 'px)')
        })
        // 右按钮
        $('.nav_goright').click(function () {
            if (nav_cnt_Maxdeviation > nav_cnt_deviation - nav_list_arr[nav_lt]) {
                // 计算超出的偏移值
                nav_cnt_deviation_exceed = nav_cnt_Maxdeviation - nav_cnt_deviation
                nav_cnt_deviation = nav_cnt_Maxdeviation //偏移值
                $('.nav_goright').css('display', 'none')
            } else {
                nav_cnt_deviation = nav_cnt_deviation - nav_list_arr[nav_lt]
                nav_lt = nav_lt + 1;
            }
            $('.nav_list>li').css('transform', 'translate(' + String(nav_cnt_deviation) + 'px)')
            $('.nav_goleft').css('display', 'block')
        })

        //屏幕变化,初始化
        $(window).resize(function () {
            if ($(window).width() >= 769) {
                // 变量初始化
                nav_list_arr = []
                nav_list_width = 0
                nav_list_arr = $('.nav_list>li').map(function (i, n) {
                    nav_list_width = nav_list_width + $(n).width() + nav_list_p
                    return $(n).width() + nav_list_p
                })

                console.log(nav_list_arr);
                nav_cnt_width = $('.nav_cnt').width()
                if (nav_cnt_width <= nav_list_width) {
                    $('.nav_goright').css('display', 'block')
                } else {
                    $('.nav_goright').css('display', 'none')
                }
                nav_cnt_Maxdeviation = nav_cnt_width - nav_list_width
                nav_cnt_deviation = 0 //偏移值
                nav_lt = 0; //当前位置
                nav_cnt_deviation_exceed = 0 //超出的偏移值
                $('.nav_list>li').css('transform', 'translate(' + String(0) + 'px)')
                $('.nav_goleft').css('display', 'none')
                if (nav_cnt_width <= nav_list_width) {
                    $('.nav_goright').css('display', 'block')
                }
                $(".nav_list").css('display', 'flex');
                // 清空移动端赋予的css样式
                $(".nav_list>li>ul").attr("style","");
                $(".hamburger").removeClass("active");
            } else {
                $('.nav_goright').css('display', 'none')
                $(".nav_list").css('display', 'none');
            }
            //遮罩层隐藏
            $(".nav_bg_ceng").css('display', 'none');
        })

        // 点击汉堡
        function hamburger() {
            $(".hamburger").toggleClass("active");
            $(".nav_bg_ceng").toggle();
            if ($(".nav_list").css("display") == "none") {
                $(".nav_list").slideUp();
                $(".nav_list").slideDown(300);
            } else {
                $(".nav_list").slideUp();
            }
        }
        $(".hamburger").click(function () {
            hamburger()
        })
        $(".nav_bg_ceng").click(function () {
            hamburger()
        })

        // 移动端点击下拉
        function nav_list_two() {
            $(".nav_list>li .nav_down_small").click(function () {
                if ($(this).prev().css("display") == "none") {
                    $(".nav_down_small").prev().slideUp();
                    $(".nav_down_small").css("transform", "rotate(0deg)")
                    $(this).prev().slideDown(300);
                    $(this).css("transform", "rotate(90deg)")
                } else {
                    $(this).prev().slideUp();
                    $(this).css("transform", "rotate(0deg)")
                }
            })
        }
        if ($(window).width() <= 768) {
            nav_list_two()
        }
    })
</script>

</html>